@import '../../src/assets/css/default.less';

@tabBarPrefixCls: yh-tab-bar;

@tabBarHeight: 44px;
@tabBarBorderColor: #ddd;

.@{tabBarPrefixCls} {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    flex-direction: row;
    box-sizing: border-box;
    background-color: #fff;

    &-wrap {
        width: 100%;
        overflow: scroll;
    }

    &-items {
        height: @tabBarHeight;
        line-height: @tabBarHeight;
        text-align: center;
        color: @color-text-base;
        font-size: @font-size-base;
        white-space: nowrap;
        &.@{tabBarPrefixCls}-tab-active {
            color: @brand-primary;
        }
    }

    &-tab {
        flex: 1;
    }

    &-underline {
        position: absolute;
        bottom: 0;
        border: 1px solid @brand-primary; /*no*/
        z-index: 10;
        -webkit-transition: left .3s cubic-bezier(.35,0,.25,1), width .3s cubic-bezier(.35,0,.25,1);
        transition: left .3s cubic-bezier(.35,0,.25,1), width .3s cubic-bezier(.35,0,.25,1);
        will-change: left,width;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    html:not([data-scale]) .@{tabBarPrefixCls}-line.@{tabBarPrefixCls}-top:after {
        content: "";
        position: absolute;
        background-color: @tabBarBorderColor;
        display: block;
        z-index: 1;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px; /*no*/
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        transform: scaleY(.5);
    }

    html:not([data-scale]) .@{tabBarPrefixCls}-line.@{tabBarPrefixCls}-bottom:before {
        content: "";
        position: absolute;
        background-color: @tabBarBorderColor;
        display: block;
        z-index: 1;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px; /*no*/
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        transform: scaleY(.5);
    }
}
